<template>
  <div>
    <van-tabbar v-model="activeIndex" @change="gotoPage">
      <van-tabbar-item :to="'/'">
        <span>首页</span>
        <i slot="icon" class="iconfont icon-shouye"></i>
      </van-tabbar-item>
      <van-tabbar-item :to="'/result'">
        <span>开奖</span>
        <i slot="icon" class="iconfont icon-trophy"></i>
      </van-tabbar-item>
      <van-tabbar-item v-if="isAgent" :to="'/agent'">
        <span>代理</span>
        <i slot="icon" class="iconfont icon-dataBase"></i>
      </van-tabbar-item>
      <van-tabbar-item :to="'/me'">
        <span>我的</span>
        <i slot="icon" class="iconfont icon-wode"></i>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { debug } from 'util';
export default {
  name: "XC-footer",
  data() {
    return {
      isAgent:false,
      activeIndex:0,
      icon: {
        
      }
    }
  },
  props: {
    active: {
      type: Number,
      default: 0
    }
  },
  watch: {
      
  },
  methods: {
    gotoPage(index){
        console.log('进入');
    }
  },
  created(){
     console.log("created");
     this.init();
  },
  activated() {
    console.log("activated");
    this.init();
  },
  methods:{
    init(){
     
      // if(this.active != undefined){
      //   this.activeIndex = this.active;
      //   return false;
      // }
      switch(this.$route.name){
      case 'index':this.activeIndex = 0;break;
      case 'result':this.activeIndex = 1;break;
      case 'agent':this.activeIndex = 2;break;
      case 'me':this.activeIndex = this.isAgent?3:2;break;
      default : this.activeIndex =0; break;
    }
    }
  }
};
</script>
<style lang="less" >
.van-tabbar-item--active {
  color: @theme-color;
}
</style>
